<template>
    <header>
        <h1>个人主页</h1>
        <div class="user">
            <div class="pic" v-if="userData.obj['user_pic']" :style="{ background: ` url(${getImg(userData.obj['user_pic'])})` }"></div>
            <div class="text">
                <div class="name">{{ userData.obj.passname }}</div>
                <div class="personal-signature">{{ userData.obj.signature ? userData.obj.signature : "还没有个性签名哦" }}</div>
            </div>
        </div>
    </header>
    <main>
        <van-cell to="/myEssay" title="我的文章" icon="description" is-link />
        <van-cell to="/myLikes" title="我的喜欢" icon="like-o" is-link />
        <van-cell to="/myCollects" title="我的收藏" icon="star-o" is-link />
        <van-cell to="/set" title="设置" icon="setting-o" is-link />
    </main>
</template>

<script lang="ts" setup>
import { getUserData } from "@/fun/fun";
import axios from "axios";
import { getUserMsg, getImg } from "@/api/api";
import { reactive } from "vue";
let userData = reactive({ obj: {} as { passname: String; user_pic: String; signature: String } });
// 初始化用户数据
let getUserDataApi = () => {
    axios(getUserMsg(getUserData())).then(({ data }) => {
        userData.obj = data[0];
    });
};

getUserDataApi();
</script>

<style lang="scss" scoped>
header {
    h1 {
        padding: 1vh 0;
        text-align: center;
    }

    .user {
        margin: 0.9375rem 1.25rem 0;
        padding: 0.9375rem 0;
        box-shadow: 0 0 2px rgba($color: #000000, $alpha: 0.1);
        border-radius: 20px;
    }
    .pic {
        width: 5rem;
        height: 5rem;
        margin: 0 auto;
        background-position: center !important;
        background-size: cover !important;
        border-radius: 50%;
    }
    .name {
        text-align: center;
        font-size: 28px;
    }
    .personal-signature {
        text-align: center;
        font-size: 14px;
        margin-top: 0.625rem;
        color: #999;
    }
}
main {
    margin-top: 10px;
    padding: 0 2vw;
}
</style>
